<div class="main-container">
    <!-- 上报数据 -->
    <div class="main-title">
        <div class="lf">{{planName}}</div>
    </div>
    <div class="mng-current-wrap" *ngIf="daysTotalData[0]">
        <div class="total-data-box">
            <h5 class="lable-name">{{daysTotalData[0].name}}</h5>
            <div class="total-data">
                <div class="data-item">
                    <p class="data-number col-yellow">{{daysTotalData[0].total}}</p>
                    <p class="data-label">流量合计(m<sup>3</sup>/s)</p>
                </div>
                <div class="data-item">
                    <p class="data-number">{{daysTotalData[0].avg}}</p>
                    <p class="data-label">平均日流量(m<sup>3</sup>/s)</p>
                </div>
                <div class="data-item">
                    <p class="data-number">{{daysTotalData[0].water}}</p>
                    <p class="data-label">水量合计(万m³ )</p>
                </div>
            </div>
        </div>
        <div class="year-data-box">
            <h5 class="lable-name">年计划本月用水指标</h5>
            <div class="data-item">
                <span class="data-number">{{planData}}</span>
                <span>万 m <sup>3</sup></span>
            </div>
        </div>
        <div class="totalPlan-data-box">
            <h5 class="lable-name">与计划指标对比</h5>
            <div class="data-item">
                <span class="data-regulation">{{yearOnYear>0?"超":"少"}}</span>
                <span class="data-number">{{yearOnYear | mathAbs}} </span>
                <span>万m³</span>
            </div>
        </div>
    </div>
    <div class="mng-total-table" *ngIf="daysTotalData.length>1">
        <ng-container *ngFor="let item of daysTotalData;let i=index">
            <div class="total-item" *ngIf="i!=0">
                <h5 class="lable-name">{{item.name}}</h5>
                <div class="total-data">
                    <div class="data-item">
                        <p class="data-number col-yellow">{{item.total}}</p>
                        <p class="data-label">流量合计(m<sup>3</sup>/s)</p>
                    </div>
                    <div class="data-item">
                        <p class="data-number">{{item.avg}}</p>
                        <p class="data-label">平均日流量(m<sup>3</sup>/s)</p>
                    </div>
                    <div class="data-item">
                        <p class="data-number">{{item.water}}</p>
                        <p class="data-label">水量合计(万m³ )</p>
                    </div>
                </div>
            </div>
        </ng-container>
    </div>
    <!-- <div class="main-title">
        <div class="lf">{{planName}}</div>
        <div class="rf" *ngIf="paramsData.dataFlag!='2'">( 年计划本月水量指标：<span class="blue-text">{{planData}} 万m³</span>，与计划指标对比：
            <span *ngIf="yearOnYear;else zeroTmp" [ngClass]="yearOnYear>0?'inc':'dec'">{{yearOnYear>0?"超":"少"}}{{yearOnYear | mathAbs}} 万m³</span>
            <ng-template #zeroTmp>无增减</ng-template>
            )
        </div>
    </div> -->
    <div class="main-content">
        <!-- 合计表格 -->
        <div class="total-table" *ngIf="paramsData.dataFlag!='2'">
            <!-- <nz-table #monthTotal nzSize="middle" nzBordered [nzData]="daysTotalData" [nzFrontPagination]="false" [nzShowPagination]="false">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>流量合计( m³/s )</th>
                        <th>平均日流量( m³/s )</th>
                        <th>水量合计( 万m³ )</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let row of monthTotal.data">
                        <td>{{ row.name }}</td>
                        <td>{{ row.total }}</td>
                        <td>{{ row.avg }}</td>
                        <td>{{ row.water }}</td>
                    </tr>
                </tbody>
            </nz-table> -->
        </div>
        <!-- 计划表格 -->
        <ng-container>
            <div class="main-card-body ten-days-body">
                <div class="left-table">
                    <nz-table [nzScroll]="scrollConfig" #tenDays nzSize="middle" nzBordered [nzData]="tableDaysData" [nzFrontPagination]="false" [nzShowPagination]="false">
                        <thead>
                            <tr>
                                <th nzWidth="150px" nzLeft="0px">日期</th>
                                <th nzWidth="80px" *ngFor="let item of monthHead">{{item}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let row of tenDays.data">
                                <td nzWidth="150px" nzLeft="0px">{{row.name}} （m³/s）</td>
                                <td nzWidth="80px" *ngFor="let key of keyList">
                                    <div *ngIf="!isEditableTd(row.areaId,row.type); else inputTpl">
                                        <div class="editable-cell-value-wrap" (click)="startEdit(row.areaId, $event)">
                                            {{ row[key] }}
                                        </div>
                                    </div>
                                    <ng-template #inputTpl>
                                        <input type="text" nz-input [(ngModel)]="row[key]" />
                                    </ng-template>
                                </td>
                            </tr>
                        </tbody>
                    </nz-table>
                    <div class="table-btn-group" *ngIf="openType!='view'">
                        <button *ngIf="planState==='0'" nz-button nzType="primary" (click)="submitEvent()">保存</button>
                        <!-- 上报数据 -->
                        <button *ngIf="planState==='0'" nz-popconfirm nzTitle="确认提交?" (nzOnConfirm)="submitEvent('manageApply')" nz-button nzType="default">提交</button>
                        <!-- 分解 -->
                        <button *ngIf="openType==='division'" nz-popconfirm nzTitle="确认提交?" (nzOnConfirm)="submitEvent('manageDivide')" nz-button nzType="default">提交分解</button>
                    </div>
                </div>
            </div>
        </ng-container>
        <!-- 统计图标 -->
        <app-statistical-chart [manageId]="paramsData.manageId"></app-statistical-chart>
    </div>
</div>